<template>
  <div class="Shop">
    <header>
      <van-icon name="arrow-left" @click="fanhuib" />
      <span> 个人资料 </span>
      <span></span>
    </header>
    <main>
      <div>
        <ul>
          <li>
            <van-field
              v-model="username"
              label="姓名："
              placeholder="请输入姓名"
            />
            <van-cell-group>
              <van-field
                v-model="value"
                label="性格："
                placeholder="请输入性格"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                v-model="valu"
                label="爱好："
                placeholder="请输入爱好"
              />
            </van-cell-group>
            <van-field
              v-model="tel"
              type="tel"
              label="手机号："
              placeholder="输入电话"
            />
            <van-field
              v-model="sms"
              center
              clearable
              label="验证码:"
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button size="small" type="primary">发送验证码</van-button>
              </template>
            </van-field>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      valu: "",
      tel: "",
      sms: "",
      username:''
    };
  },
  methods: {
    fanhuib() {
      this.$router.go(-1);
    },
  },
};
</script>

<style>
.Shop {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  align-items: center;
  font-size: 15px;
  background: #fff;
}
main {
  flex: 1;
  overflow: scroll;
}
.van-cell{
 margin: 10px 0;
}
</style>